<template>
  <div id="map">
  </div>
</template>
 
<script>
//导入相关配置信息
import 'ol/css';
import{ Map, View} from 'ol'
import TileLayer from 'ol/layer/Tile'
import { defaults as defaultControls, FullScreen } from "ol/control"
import XYZ from 'ol/source/XYZ';
export default {
  name:"MapM",
  data(){
    return {
      map:null
    }
  },
  mounted(){
    this.map = new Map({//1.创建地图对象 new Map()
      target: 'map', //2.绑定 div 元素
      layers:[ //图层数组 layers
        new TileLayer({
          name:'天地图',
          source: new XYZ({
            crossOrigin:'anonymous',
            url:'http://t0.tianditu.gov.cn/vec_c/wmts?tk=10aa6aa67a26269b2a510edf181285fb'
          })
        }),
        /* new TileLayer({
          name:'注记',
          source: new XYZ({
            crossOrigin:'anonymous',
            url:'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=d6539c1747bf5296bfe35b02151d761a'
          })
 
        }) */
      ],
      view: new View({//视图 View
        projection:"EPSG:4326",
        center:[104.07,30.67],
        zoom: 12
      }),
      controls:defaultControls({//默认控件
        zoom:false,
        rotate:false,
        attribution:false,
      }).extend([//添加新控件
        new FullScreen()
      ])
    })
  }
}
</script>
 
<style>
#map{
  height: 100%;
  width: 100%;
}
</style>